<template>

  <div>
 <el-table
    :data="getUser"
    border

    row-key='id'

    style="width: 100%">
    <el-table-column
      prop="uid"
      label="角色编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="username"
      label="角色名称"
      width="180">
    </el-table-column>

        <el-table-column
      label="状态"
        width="180"
      >
 <template slot-scope="item">
        <div>
          {{item.row.status==1?'启用':'禁用'}}
        </div>
      </template>

    </el-table-column>
        <el-table-column
      label="操作"
        width="180"
      >

       <template slot-scope="item">
        <div>
  <el-button plain  size="mini" @click='edit(item.row.uid)'>编辑</el-button>
 <el-button plain  size="mini" @click="remove(item.row.uid)">删除</el-button>

        </div>
      </template>

    </el-table-column>
  </el-table>
    <!--
     total  页数限制  满足 page-size + 页数加一
     page-size 每页展示多少条数据 默认10

     -->
    <el-pagination
  background
  layout="prev, pager, next"
  :total="getCount"
  :page-size='getSize'
@current-change='changePage'
  >
    </el-pagination>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { userdelete } from '../../api/api.js'
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$store.dispatch('conservator/getUserlist')
    this.$store.dispatch('conservator/getUsercount')
  },
  computed: {
    ...mapGetters('conservator', ['getCount', 'getSize', 'getUser'])
  },
  methods: {
    changePage (n) {
      // 获取当前页重新调用列表
      this.$store.dispatch('conservator/changePageAction', n)
    },
    remove (uid) {
      this.$confirm('你确定要删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userdelete({ uid }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.$store.dispatch('conservator/getUserlist')
            this.$store.dispatch('conservator/getUsercount')
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    edit (uid) {
      this.$emit('edit', uid)
    }
  }
}
</script>

<style>

</style>
